<template>
  <div
    v-if="!disabled"
    @mouseover="hover = true"
    @mouseleave="hover = false"
    class="actionBtn"
    :style="`color:${hover ? '#4989F2' : '#333'}`"
    @click="$emit('handleClick')"
  >
    <div class="imgBox" :style="`background:${hover ? '#4989F2' : '#eee'}`">
      <img
        width="20px"
        :src="!hover ? activeIcon : unActiveIcon"
        alt=""
        class="actionBtnIcon"
      />
    </div>
    {{ iconText }}
  </div>
  <div v-else class="disabledActionBtn">
    <div class="imgBox">
      <img width="20px" :src="activeIcon" alt="" class="actionBtnIcon" />
      <div class="disabledmMasking"><div></div></div>
    </div>
    {{ iconText }}
  </div>
</template>

<script>
export default {
  props: {
    iconText: String,
    activeIcon: String,
    unActiveIcon: String,
    disabled: Boolean,
  },
  data() {
    return {
      hover: false,
    };
  },
};
</script>

<style scoped>
.actionBtn {
  width: 60px;
  margin: 2px;
  color: #a7a7a7;
  font-size: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}

.disabledActionBtn {
  width: 60px;
  margin: 5px;
  color: #a7a7a7;
  font-size: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}
.imgBox {
  height: 40px;
  width: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  position: relative;
}

.disabledmMasking {
  height: 40px;
  width: 40px;
  background: rgba(255, 255, 255, 0.4);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  top: 0;
  left: 0;
  border: 2px solid #ddd;
}

.disabledmMasking > div {
  width: 57px;
  height: 2px;
  background: #ddd;
  transform: rotate(45deg);
}

.actionBtnText {
  color: #a7a7a7;
  font-size: 12px;
}
</style>